<template>
  <div class="student_love_number">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item label="班级名称:" >
        <el-select
          v-model="departmentGuid"
          placeholder="请选择"
          size="mini"
          clearable
          @clear="clearclass()"
          @change="chioceclass()"
        >
          <el-option
            v-for="item in departmentoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生:" >
        <el-select v-model="studentGuid" placeholder="请选择" size="mini" clearable>
          <el-option
            v-for="item in studentoption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="gotosearch" size="mini" icon="el-icon-search">亲情号查询</el-button>
      </el-form-item>
      <el-form-item v-show="this.studentGuid!='' && this.studentGuid!=null">
        <el-button type="primary" @click="handleAddclick" size="mini" icon="el-icon-plus" v-if="isauth('family_edit')">新增亲情号码</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="dataListLoading"
      :data="studentfamily"
      style="width:100%"
      border="border"
      class="tablebox"
      highlight-current-row
      :header-cell-style="headFirst"
      :cell-style="(res) => headFirst_col(res, [])"
    >
      <el-table-column prop="name" label="成员姓名"></el-table-column>
      <el-table-column prop="relationship" label="亲子关系"></el-table-column>
      <el-table-column prop="longNumber" label="电话号码"></el-table-column>
      <el-table-column label="操作" v-if="isauth('family_edit')">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="editUserForm(scope.row)">编辑成员</el-button>
          <el-button type="text" style="color:red" size="mini" @click="deleteUser(scope.row)">删除成员</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增情亲号 -->
    <el-dialog
      width="500px"
      custom-class="customWidth"
      center
      :before-close="closeDialog"
      title="添加亲情号信息"
      :close-on-click-modal="false"
      :visible.sync="addDialogFormVisible"
    >
      <el-form :model="addataForm" :rules="myRule" ref="addRef" >
        <el-form-item label="成员姓名" prop="familynam">
          <el-col :span="15">
            <el-input v-model="addataForm.familynam" placeholder="请输入成员姓名" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="类型" prop="familyRelationship">
          <el-col :span="15">
            <el-select
              v-model="addataForm.familyRelationship"
              placeholder="请选择"
              style="width:100%"
              size="mini"
            >
              <el-option
                v-for="item in familyRelationoption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="电话号码" prop="familynumber">
          <el-col :span="15">
            <el-input v-model="addataForm.familynumber" placeholder="请输入电话号码" size="mini"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addvisible()">取消</el-button>
        <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑亲情号 -->
    <el-dialog
      width="500px"
      custom-class="customWidth"
      center
      :before-close="eidtcloseDialog"
      title="修改亲情号信息"
      :close-on-click-modal="false"
      :visible.sync="eidtDialogFormVisible"
    >
      <el-form :model="eidtfromdata" :rules="myRule" ref="eidtRef" >
        <el-form-item label="成员姓名" prop="familynam">
          <el-col :span="15">
            <el-input v-model="eidtfromdata.familynam" placeholder="成员姓名" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="类型" prop="familyRelationship">
          <el-col :span="15">
            <el-select
              v-model="eidtfromdata.familyRelationship"
              placeholder="请选择"
              style="width:100%"
              size="mini"
            >
              <el-option
                v-for="item in familyRelationoption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="电话号码" prop="familynumber">
          <el-col :span="15">
            <el-input v-model="eidtfromdata.familynumber" placeholder="编号" size="mini"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="eidtvisible()">取消</el-button>
        <el-button type="primary" @click="eidtataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        // 通过callback传递错误信息
        callback();
      } else {
        let emailReg = /^1[3456789]\d{9}$/;
        if (!emailReg.test(value)) {
          callback(new Error("请输入正确的手机号码格式！"));
        } else {
          // 没有错误了就直接调用callback
          callback();
        }
      }
    };
    return {
      departmentGuid: "",
      departmentoptions: [],
      studentGuid: "",
      studentoption: [],
      addDialogFormVisible: false,
      eidtDialogFormVisible: false,
      elform: {},
      dataListLoading: false,
      studentfamily: [],
      familyRelationoption: [
        {
          value: "爸爸",
          label: "爸爸"
        },
        {
          value: "妈妈",
          label: "妈妈"
        },
        {
          value: "爷爷",
          label: "爷爷"
        },
        {
          value: "奶奶",
          label: "奶奶"
        },
        {
          value: "哥哥",
          label: "哥哥"
        },
        {
          value: "姐姐",
          label: "姐姐"
        },
        {
          value: "弟弟",
          label: "弟弟"
        },
        {
          value: "妹妹",
          label: "妹妹"
        },
        {
          value: "其他",
          label: "其他"
        }
      ],
      addataForm: {
        familynam: "",
        familyRelationship: "",
        familynumber: ""
      },
      eidtfromdata: {
        familynam: "",
        familyRelationship: "",
        familynumber: "",
        userGuid: "",
        numberGuid: ""
      },
      myRule: {
        familyRelationship: [
          {
            required: true,
            message: "请输入亲子关系",
            trigger: ["blur", "change"]
          }
        ],
        familynam: [
          { required: true, message: "请输入成员姓名", trigger: "blur" }
        ],
        familynumber: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.departmentselectlist();
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      }
    }
  },
  methods: {
    gotosearch() {
      this.familylist();
    },
    //情亲号信息
    familylist() {
      if (this.departmentGuid == "" || this.departmentGuid == null) {
        this.$message({
          message: "请选择班级再查询",
          type: "warning"
        });
        return false;
      }
      if (this.studentGuid == "" || this.studentGuid == null) {
        this.$message({
          message: "请选择学生再查询",
          type: "warning"
        });
        return false;
      }
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/voip/user/family-list"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.studentGuid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.studentfamily = data.messageContent || [];
          this.dataListLoading = false;
          if (this.studentfamily.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        }
        if (data.messageCode == 500) {
          this.$message.error(data.errorMessage);
        }
      });
    },
    //新增情亲号
    handleAddclick() {
      this.addDialogFormVisible = true;
    },
    //部门选择
    departmentselectlist() {
      this.departmentoptions = [];
      this.$http({
        url: this.$http.adornUrl("/department/query-department-info"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data);
          let Arr = data.messageContent;
          for (var i = 0; i < Arr.length; i++) {
            let itemobj = {
              value: Arr[i].departmentGuid,
              label: Arr[i].departmentName
            };
            this.departmentoptions.push(itemobj);
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    chioceclass() {
      if (this.departmentGuid != null && this.departmentGuid != "") {
        this.allstudent();
      }
    },
    clearclass() {
      this.studentGuid = "";
      this.studentoption = [];
    },
    //获取学生信息
    allstudent() {
      this.studentGuid = "";
      this.studentoption = [];
      this.$http({
        url: this.$http.adornUrl("/voip/manager/getUser-department"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            departmentGuid: this.departmentGuid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          let allstudentnam = data.messageContent;
          if (this.studentoption.length == 0) {
            for (var i = 0; i < allstudentnam.length; i++) {
              var itemObj = {
                label: allstudentnam[i].userName,
                value: allstudentnam[i].userGuid
              };
              this.studentoption.push(itemObj);
            }
          }
        }
      });
    },
    closeDialog(done) {
      this.$refs["addRef"].resetFields();
      done();
    },
    addvisible() {
      this.addDialogFormVisible = false;
      this.$refs["addRef"].resetFields();
    },
    addataFormSubmit() {
      this.$refs["addRef"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl("/voip/user/add-family-member"),
            method: "post",
            data: this.$http.adornData({
              messageContent: {
                longNumber: this.addataForm.familynumber,
                name: this.addataForm.familynam,
                relationship: this.addataForm.familyRelationship,
                userGuid: this.studentGuid
              },
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.$message({
                message: "添加情亲号成功",
                type: "success"
              });
              this.familylist();
              this.$refs["addRef"].resetFields();
              this.addDialogFormVisible = false;
            }
            if (data.messageCode == 500) {
              this.$message.error(data.errorMessage);
            }
          });
        }
      });
    },
    eidtcloseDialog(done) {
      done();
    },
    eidtvisible() {
      this.eidtDialogFormVisible = false;
      this.$refs["eidtRef"].resetFields();
    },
    eidtataFormSubmit() {
      this.$refs["eidtRef"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl("/voip/user/update-family-member"),
            method: "post",
            data: this.$http.adornData({
              messageContent: {
                numberGuid: this.eidtfromdata.numberGuid,
                longNumber: this.eidtfromdata.familynumber,
                name: this.eidtfromdata.familynam,
                relationship: this.eidtfromdata.familyRelationship,
                userGuid: this.eidtfromdata.userGuid
              },
              messageType: this.messageType
            })
          }).then(({ data }) => {
            console.log(data);
            if (data.messageCode == 200) {
              this.$message({
                message: "修改情亲号成功",
                type: "success"
              });
              this.familylist();
              this.eidtDialogFormVisible = false;
            }
            if (data.messageCode == 500) {
              this.$message.error(data.errorMessage);
            }
          });
        }
      });
    },
    editUserForm(row) {
      console.log(row);
      this.eidtfromdata.familynam = row.name;
      this.eidtfromdata.familyRelationship = row.relationship;
      this.eidtfromdata.familynumber = row.longNumber;
      this.eidtfromdata.userGuid = row.userGuid;
      this.eidtfromdata.numberGuid = row.numberGuid;
      this.eidtDialogFormVisible = true;
    },
    deleteUser(row) {
      console.log(row);
      let messageContent = { ...row };
      messageContent.unitGuid = this.changeschoolid;
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/voip/user/delete-family-member"),
            method: "post",
            data: this.$http.adornData({
              messageContent: messageContent,
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.$message({
                message: "删除情亲号成功",
                type: "success"
              });
              this.familylist();
              this.addDialogFormVisible = false;
            }
            if (data.messageCode == 500) {
              this.$message.error(data.errorMessage);
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.student_love_number {
  padding: 10px;
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-dialog--center .el-dialog__body {
    padding-left: 100px;
  }
  .demo-form-inline,
  .demo-form-inline1 {
   
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 250px;
    }
  }
}
</style>